<style>
.all {
  margin: 0 auto;
  width: 1226px;
  display: flex;
}
.all::-webkit-scrollbar {
  display: none;
}
.left {
  flex: 1;
  width: 230px;
}
.title {
  display: inline-block;
  margin: 16px auto 20px;
  font-size: 16px;
  color: #333;
  line-height: 22px;
  font-weight: 700;
}
.left-con {
  position: relative;
  left: 20px;
  padding: 12px;
  width: 230px;
  height: 800px;
  background-color: white;
  border: 1px solid rgb(207, 203, 203);
  box-shadow: 0px 0px 20px rgb(146, 146, 146);
}
.left-con .zhuangtai {
  background: #f6f6f6;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  padding-left: 8px;
  margin-bottom: 5px;
  border-radius: 4px;
}
.left .left-con .zhuangtai-con {
  list-style: none;
  width: 206px;
  padding-left: 4px;
  overflow: auto;
}
.left .left-con .zhuangtai-con li {
  float: left;
  margin: 4px 8px;
  cursor: pointer;
}
.right {
  flex: 1;
  width: 850px;
}
.right-title {
  color: #999;
  line-height: 22px;
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  font-weight: 400;
  margin: 15px 0 0 20px;
  letter-spacing: 0;
}
.right-con {
  display: block;
  position: relative;
  right: 20px;
  padding: 20px 80px 20px 306px;
  margin-top: 20px;
  margin-right: 50px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 10px;
  width: 850px;
  height: 200px;
}
.right-con:hover {
  box-shadow: 0px 0px 20px rgb(146, 146, 146);
}
.right-con img {
  position: absolute;
  left: 23px;
  top: 24px;
  width: 266px;
  height: 150px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.right-con p {
  font-size: 14px;
  color: #999;
  line-height: 22px;
  overflow: hidden;
  position: relative;
}
.active {
  /* color: blue; */
  background: #ccc;
  border-radius: 20%;
}
</style>
<template>
  <div class="all">
    <div class="left">
      <div class="title">课程筛选</div>
      <div class="left-con">
        <p class="zhuangtai">课程状态</p>
        <ul class="zhuangtai-con">
          <li
            @click="fn();active(1)"
            :class="i==1?'active':''"
          >全部</li>
          <li
            @click="start();active(2)"
            :class="i==2?'active':''"
          >即将开课</li>
          <li
            @click="active(3)"
            :class="i==3?'active':''"
          >开课中</li>
          <li
            @click="active(4)"
            :class="i==4?'active':''"
          >已结课</li>
        </ul>
        <p class="zhuangtai">学科分类</p>
        <ul class="zhuangtai-con">
          <li>全部</li>
          <li>计算机</li>
          <li>外语</li>
          <li>管理学</li>
          <li>哲学</li>
          <li>经济学</li>
          <li>法学</li>
          <li>教育教学</li>
          <li>文化文学</li>
          <li>历史</li>
          <li>理学</li>
          <li>工学</li>
          <li>农林园艺</li>
          <li>医药卫生</li>
          <li>艺术设计</li>
          <li>其他</li>
        </ul>
        <p class="zhuangtai">课程类型</p>
        <ul class="zhuangtai-con">
          <li>全部</li>
          <li>微学位</li>
          <li>直播课</li>
          <li>名校认证</li>
          <li>清华继教学分课</li>
          <li>训练营</li>
        </ul>
        <p class="zhuangtai">学校</p>
        <ul class="zhuangtai-con">
          <li>全部</li>
          <li>清华大学</li>
          <li>北京大学</li>
          <li>麻绳理工</li>
          <li>斯坦福大学</li>
          <li>复旦大学</li>
          <li>中国人民大学</li>
          <li>浙江大学</li>
          <li>上海交通大学</li>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="right-title">搜索到4911门课程</div>
      <div
        class="right-con"
        v-show="startShow"
      >
        <img
          src="@/assets/运动与健康.png"
          alt=""
        />
        <h5>运动与健康</h5>
        <p>代方梅 石问问 等 | 湖北大学 1267596人</p>
        <p>
          《运动与健康》全面地阐述体育运动与健康的关系、如何向体育运动要健康、不同运动项目的健康机制、运动损伤的预防与处理等基本内容。
        </p>
      </div>
      <div
        class="right-con"
        v-show="startShow"
      >
        <img
          src="@/assets/生活英语说.png"
          alt=""
        />
        <h5>生活英语说</h5>
        <p>杨芳 张文霞 | 清华大学 948070人</p>
        <p>
          你想在生活中使用英语和来自中外的朋友们交流吗？这门课中，我们邀请了50多位美国、英国、爱尔兰、加拿大、澳大利亚、哥伦比亚的朋友聊生活常见话题，带你领略一次不一样的英语学习之旅吧。Let’s
          go！
        </p>
      </div>
      <div
        class="right-con"
        v-show="startShow"
      >
        <img
          src="@/assets/心理学概论.png"
          alt=""
        />
        <h5>心理学概论</h5>
        <p>彭华平 | 清华大学 598257人</p>
        <p>
          本课程为心理学基础导论课，以心理学的经典理论和最新实证研究为蓝本，以积极心理学的视角，介绍科学心理学的基本理论、基本方法、研究领域和研究进展。
        </p>
      </div>
      <div class="right-con">
        <img
          src="@/assets/运动与健康.png"
          alt=""
        />
        <h5>运动与健康</h5>
        <p>代方梅 石问问 等 | 湖北大学 1267596人</p>
        <p>
          《运动与健康》全面地阐述体育运动与健康的关系、如何向体育运动要健康、不同运动项目的健康机制、运动损伤的预防与处理等基本内容。
        </p>
      </div>
      <div class="right-con">
        <img
          src="@/assets/生活英语说.png"
          alt=""
        />
        <h5>生活英语说</h5>
        <p>杨芳 张文霞 | 清华大学 948070人</p>
        <p>
          你想在生活中使用英语和来自中外的朋友们交流吗？这门课中，我们邀请了50多位美国、英国、爱尔兰、加拿大、澳大利亚、哥伦比亚的朋友聊生活常见话题，带你领略一次不一样的英语学习之旅吧。Let’s
          go！
        </p>
      </div>
      <div class="right-con">
        <img
          src="@/assets/心理学概论.png"
          alt=""
        />
        <h5>心理学概论</h5>
        <p>彭华平 | 清华大学 598257人</p>
        <p>
          本课程为心理学基础导论课，以心理学的经典理论和最新实证研究为蓝本，以积极心理学的视角，介绍科学心理学的基本理论、基本方法、研究领域和研究进展。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      i: 1,
      startShow: true,
    };
  },

  methods: {
    // 点击全部
    fn() {
      // var t = document.getElementById("test");
      // if (t.style.display === "none") {
      //   t.style.display = "block"; // 以块级元素显示
      // } else {
      //   t.style.display = "none"; // 隐藏
      // }
      this.startShow = true
    },
    // 点击即将开课
    start() {
      this.startShow = false
    },
    active(i) {
      this.i = i
    },
  },
};

</script>

<style scoped>
</style>